<template>
  <view class="wrapper">
    <arrow />
    <view class="bg">
      <view class="title">用户注册</view>
    </view>
    <view class="login">
      <view class="row">
        <view class="text">推荐人ID:</view>
        <view class="input">
          <u--input
              placeholder="请输入推荐ID"
              border="surround"
              v-model="referrer"
              clearable
          ></u--input>
        </view>
      </view>
      <view class="row">
        <view class="text">手机:</view>
        <view class="input">
          <u--input
              placeholder="请输入手机号码"
              border="surround"
              v-model="mobile"
              clearable
          ></u--input>
        </view>
      </view>
      <view class="row">
        <view class="text">验证码:</view>
        <view class="input">
          <u--input
              placeholder="请输入验证码"
              border="surround"
              v-model="verifyCode"
              clearable
          ></u--input>
        </view>
      </view>
      <view class="row">
        <view class="text"></view>
        <view class="input small">
          <u-button
              type="primary"
              size="small"
              :text="verifyText"
              @click="getVerify"
              :disabled="verifySend"
          ></u-button>
        </view>
      </view>
      <view class="a">
        <u-checkbox-group @change="changeAgreement">
          <u-checkbox :checked="agreement" iconSize="34rpx" size="20px" shape="circle" label="" labelSize="0"></u-checkbox>
        </u-checkbox-group>
        <text>阅读并同意</text>
        <text class="color" @click="goAgreementUser">《用户协议》</text>
        <text>和</text>
        <text class="color" @click="goAgreementPrivacy">《隐私政策》</text>
      </view>
      <u-button type="primary" :color="activeColor" text="注册" @click="login"></u-button>
      <view class="go" @click="goLogin">立即登录</view>
    </view>
  </view>
</template>

<script>
import color from '@/config/color.js'
import Arrow from '../../components/arrow/index'
import base64 from '../../util/base64'
import User from '../../api/user'
const userModel = new User()

const text = '获取验证码'
export default {
  components: {
    Arrow
  },
  data() {
    return {
      activeColor: color.main_color,
      referrer: '',
      mobile: '',
      verifyCode: '',
      verifyText: text,
      verifySend: false,
      agreement: false
    }
  },
  onLoad() {
    // 默认推荐人
    this.referrer = userModel.getReferrer()
  },
  methods: {
    changeAgreement() {
      this.agreement = !this.agreement
      console.log(this.agreement)
    },
    goAgreement() {
      uni.navigateTo({
        url: '/sub_common/user/agreement'
      })
    },
    goAgreementPrivacy() {
      uni.navigateTo({
        url: '/sub_common/user/agreement_privacy'
      })
    },
    goAgreementUser() {
      uni.navigateTo({
        url: '/sub_common/user/agreement_user'
      })
    },
    goLogin() {
      uni.navigateTo({
        url: '/sub_common/user/login'
      })
    },
    _timer(timeout) {
      setTimeout(() => {
        timeout--
        this.verifyText = `${timeout}秒后重新发送`
        if (timeout !== 0) {
          this._timer(timeout)
        } else {
          this.verifyText = text
          this.verifySend = false
        }
      }, 1000)
    },
    getVerify() {
      if (this.verifySend) {
        return false
      }
      if (!this.mobile) {
        uni.showToast({
          icon: 'error',
          title: '请输入手机号码'
        })
        return false
      }
      if (!/^1[3456789]\d{9}$/.test(this.mobile)) {
        uni.showToast({
          icon: 'error',
          title: '手机号码错误'
        })
        return false
      }
      userModel.getVerify({ mobile: this.mobile }).then(response => {
        let { data } = response
        data = base64.parse(data)
        const msg = (data.code && `验证码是:${data.code}`) || response.message
        const time = (data.code && 5000) || 2000
        this.verifySend = true
        this._timer(data.timeout * 60)
        uni.showToast({
          icon: 'none',
          time: time,
          title: msg
        })
      }).catch(e => {
        // uni.showToast({
        //   icon: 'none',
        //   title: e
        // })
      })
    },
    login() {
      if (!this.agreement) {
        uni.showToast({
          icon: 'none',
          title: '请同意用户协议和隐私政策'
        })
        return false
      }
      if (!this.mobile) {
        uni.showToast({
          icon: 'none',
          title: '请输入手机号码'
        })
        return false
      }
      // if (!this.referrer) {
      //   uni.showToast({
      //     icon: 'none',
      //     title: '请输入推荐人ID'
      //   })
      //   return false
      // }
      if (!this.verifyCode) {
        uni.showToast({
          icon: 'none',
          title: '请输入验证码'
        })
        return false
      }
      if (!/^1[3456789]\d{9}$/.test(this.mobile)) {
        uni.showToast({
          icon: 'error',
          title: '手机号码错误'
        })
        return false
      }
      // 检测验证码
      userModel.checkVerify({
        mobile: this.mobile,
        code: this.verifyCode
      }).then(() => {
        userModel.register({
          mobile: this.mobile,
          referrer: this.referrer
        }).then(() => {
          uni.showToast({
            icon: 'none',
            title: '注册成功',
            duration: 2000
          })
          setTimeout(() => {
            this.goLogin()
          }, 900)
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.wrapper {
  //padding: 150rpx 20rpx;
  font-size: 24rpx;
  background: $background_color;
  height: 100vh;
  .bg {
    background-image: url('#{$base_url}/mini/bg/user.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
    margin-bottom: -180px;
    padding-top: 10px;
    box-sizing: border-box;
    height: 300px;
    .title {
      font-size: 36rpx;
      font-weight: 700;
      color: white;
      margin: 150rpx 50rpx;
    }
  }
  .login {
    width: calc(100% - 100rpx);
    margin: 50rpx;
    background: white;
    padding: 25px 15px;
    border-radius: 10px;
    text-align: left;
    color: #333;
    boorder: 1px solid #eee;
    box-sizing: border-box;
    box-shadow: 0 7.5px 5px #e0e1e1;
    .a {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24rpx;
      //background: red;
      margin-bottom: 15px;
      .color {
        color: $main_color;
      }
    }
    .row {
      display: flex;
      height: 60px;
      align-items: center;
      .text {
        width: 120rpx;
        text-align: right;
      }
      .input {
        padding-left: 10px;
        &.small {
          margin-top: -30px;
        }
      }

    }
    .go {
      height: 70px;
      line-height: 70px;
      text-align: center;
    }
  }
}
</style>
